<html>
   <head>
      <script type = "text/javascript" src = "https://d3js.org/d3.v4.min.js"></script>
   </head>
   <body>
      <script>
        let width=400
        let height=300
        let data=[10,30,50]
        let color=["red","yellow","blue"]
        // 创建一个svg
        let svg=d3.select("body").append("svg").attr("width",width).attr("height",height)
        let g=svg.selectAll("g").data(data).enter().append("g")
        g.append("circle").attr("cx",function(d,i){
            return i*75+50
        })
        .attr("cy",100)
        .attr("r",function(d,i){
            return d*1.5
        })
        .attr("fill",function(d,i){
            return color[i]
        })

        // g.append("text")
        // .attr("x", function(d, i) {
        // return i * 75 + 25;
        // })
        // .attr("y", 80)
        // .attr("stroke", "teal")
        // .attr("font-size", "10px")
        // .attr("font-family", "sans-serif")
        // .text(function(d) {
        // return d;
        // });

        g.append("text").attr("x",function(d,i){
            return i*75+25
        })
        .attr("y",80)
        .attr("font-size", "8px")
        .attr("font-family", "sans-serif")
        .attr("stroke", "teal")
        .text(function(d){
            return d
        })
        
      </script>
   </body>
</html>
   
</script>

   </body>
</html>